<template>
<!-- 问题五 录入采购池弹框 -->
  <a-modal
    title="采购"
    :width="1200"
    :maskClosable="false"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item
          label=""
          :labelCol="{span: 24, offset: 0}"
          :wrapperCol="{span: 24, offset: 0}"
          has-feedback="">
          <s-table
            ref="table"
            size="default"
            :columns="columns"
            :data="loadData"
            :alert="true"
            :rowKey="(record) => record.materialId"
            :showPagination="false"
          >

            <template slot="number" slot-scope="text, record">
              <a-input-number :min="0" v-model="record.number" placeholder="请输入数量"/>
            </template>
            
            <span slot="number">采购数量</span>

            <template slot="remark" slot-scope="text, record">
              <a-input v-model="record.remark"/>
            </template>

            <span slot="action" slot-scope="text, record">
              <a @click="del(record)">删除</a>
            </span>
          </s-table>
        </a-form-item>


      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {STable} from '@/components'
import {add, addList, list, page} from '@/api/modular/main/emsmaterialpool/emsMaterialPoolManage'

export default {
  components: {
    STable,
  },

  data() {
    return {
      materialId:'',
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15}
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return new Promise((resolve, reject) => {
          let tableData = this.tableData
          console.log('tableData',tableData)
          // let rowOne = tableData[0]
          // let materialType = rowOne.materialType
          let poolType = "1479447062284427265"
          let materialIds = this.materialId
          console.log('materialIds',materialIds)
          list({materialIds, poolType}).then(res => {
            let materialPools = res.data
            console.log(materialPools)
            tableData.forEach(materialPoolParam => {
              let findMaterialPoolResult = materialPools.find(value => value.materialId == this.materialId)
              console.log('findMaterialPoolResult',findMaterialPoolResult)
              materialPoolParam.waitNumber = findMaterialPoolResult ? findMaterialPoolResult.number : 0
              materialPoolParam.remark = ''
            })

            let value = {
              pageNo: 1,
              pageSize: -1,
              rainbow: [1],
              rows: tableData,
              totalPage: 1,
              totalRows: tableData.length
            }
            return resolve(value)
          })
        })
      },
      columns: [       // 表头
        {
          title: '序号', width:'80px',
          dataIndex: 'index',
          key: 'index',
          align: 'center',
          customRender: (text,record,index) => `${index+1}`,
        },
        {
          title: '料号',
          dataIndex: 'materialCode'
        },
        {
          title: '名称',
          dataIndex: 'materialName'
        },
        {
          title: '池中数量',
          dataIndex: 'waitNumber'
        },
        // {
        //   title: '库存数量',
        //   dataIndex: 'inventoryNumber'
        // },
        {
          dataIndex: 'number',
          width: '100px',
          slots: {title: 'number'},
          scopedSlots: {customRender: 'number'}
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: '',
          scopedSlots: {customRender: 'remark'}
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: {customRender: 'action'}
        }
      ],
      poolType: "1479447062284427265",
      tableData: [],
    }
  },
  methods: {
    add(record) {
      if (!record.materialCode) {
        this.$message.error('请先选择物料')
        return
      }
      this.visible = true
      this.materialId = record.materialId
      let rows = [{materialCode: record.materialCode}]
      this.poolType = "1479447062284427265"

      rows = rows.map(row => Object.assign({
        materialPoolId: null,
        materialId: 0,
        number: 1,
        materialName: record.materialName,
        poolType: "1479447062284427265",
        materialType: record.materialType,
        status: 0,
        remark: '',
        createTime: null,
        createUser: null,
        updateTime: null,
        updateUser: null,
      }, row))
      this.tableData = rows
      console.log(this.tableData)
      setTimeout(() => {
          this.$refs.table.refresh()
      }, 100)
    },
    add1(record) {
      this.visible = true
      this.tableData = [...record]
      setTimeout(() => {
        this.$refs.table.refresh()
      }, 100)
    },
    handleSubmit() {
      this.confirmLoading = true
      let values = this.tableData.map(value => {
        let {
          materialPoolId, 
          materialId, 
          number, 
          poolType,
          materialType, 
          remark, 
          status, 
          createTime, 
          createUser, 
          updateTime, 
          updateUser
        } = value
        return {materialPoolId, materialId: this.materialId, number, poolType:"1479447062284427265", materialType, remark, status, createTime, createUser, updateTime, updateUser}
      })
      addList(values).then((res) => {
        this.confirmLoading = false
        if (res.success) {
          this.$message.success('新增成功')
          this.handleCancel()
          this.$emit('ok', values)
        } else {
          this.$message.info('新增失败：' + res.message)
        }
      }).finally((res) => {
        this.confirmLoading = false
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
      this.materialId = ''
    },
    del(record) {
      let findIndex = this.tableData.findIndex(value => value == record)
      this.tableData.splice(findIndex, 1)
      
    },
  }
}
</script>
